<template>
	<view class="bg-grey container">
		<sb-back-icon />
		<u-sticky h5-nav-height='0'>
			<u-tabs :list="tabs" active-color="#080808" :is-scroll="false" :current="query.status"
				@change="query.status=$event" />
		</u-sticky>
		<sb-loading-container ref='loadingRef'>
			<sb-empty v-if="!couponList.length" />
			<view class="pad10 relative marv20 w100" v-else>
				<view v-for="(v, i) in couponList" :key="i" @click="selected(v)"
					class="relative bg-white flex radius12 marv20" style="height: 180rpx">
					<view style="width: 70%" class="flex flex-col j-c relative padh30">
						<view class="tip absolute t-c c-w font24" v-if="v.visible">
							可用
						</view>
						<view class="padv10 bold">{{ v.tk.name }}</view>
						<view class="padv10">{{ v.tk.desc }}</view>
						<view class="font24 c-d flex a-c"> 有效期至{{ v.tk.expires }} </view>
					</view>
					<view class="flex1 c-w flex flex-col a-c j-c" :style="{
			        backgroundColor: v.status === 1 ? '#ccc' : '#FF6666',
			        color: '#fff',
			      }">
						<view class="w100 t-c font48">{{
			        v.tk.type === 3 ? `${v.tk.discount}折` : `${v.tk.reduce}元`
			      }}</view>
						<view v-if="v.tk.type !== 3" class="font33 t-c">直减</view>
					</view>
					<view class="absolute bg-grey radius20 up" style="width: 40rpx; height: 40rpx"></view>
					<view class="absolute bg-grey radius20 down" style="width: 40rpx; height: 40rpx"></view>
				</view>
			</view>
		</sb-loading-container>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				tabs: ["Available", "Expired"].map((name) => ({ name })),
				couponList: [],
				query: {
					status: 0,
					pageIndex: 1,
					pageSize: 10,
				},
			};
		},
		watch: {
			'query.status'(index) {
				this.query.pageIndex = 1;
				this.getList();
			},
		},
		onLoad({ id }) {
			if (!this.$checkLogin()) return this.$redirect2Login();
			if (id) this.id = id;
		},
		onReady() {
			this.getList();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.query.pageIndex = 1;
			this.getList();
		},
		onReachBottom() {
			this.query.pageIndex++
			this.getList();
		},
		methods: {
			async getList() {
				this.$refs.loadingRef.show()
				let { data: { rows }, success, } = await this.$get(`/ticket/mine`, this.query);
				if (!success) return this.$msg("request fail");
				if (this.query.pageIndex === 1) this.couponList = [];
				if (!rows.length) {
					if (this.query.pageIndex > 1) this.$msg("no more");
				} else this.couponList = this.couponList.concat(rows);
				this.$refs.loadingRef.hide()
			},
			selected(item) {
				let pages = $prevPage();
				if (prev && this.id) {
					prev.discountCoupon = item;
					this.$back();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.up {
		top: -20rpx;
		left: calc(50% + 125rpx);
	}

	.down {
		bottom: -20rpx;
		left: calc(50% + 125rpx);
	}

	.tip {
		background-color: #e8364c;
		width: 150rpx;
		border-bottom-right-radius: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		left: 0;
		top: 0;
	}
</style>
